<template>
  <view class="invite">
    <u-list @scrolltolower="scrolltolower">
      <u-list-item v-for="(item, index) in shareList" :key="index">
        <view class="item">
          <view class="item-title-box">
            <view style="max-width: 600rpx" @click="onItemClick(item, index)">
              <view>
                <view class="item-title">
                  {{ item.title }}
                </view>
              </view>
            </view>

            <view style="margin-top: -16rpx; margin-right: -28rpx">
              <switch
                style="transform: scale(0.7)"
                color="rgba(10, 63, 255, 1)"
                :checked="item.status == 1"
                @change="(e) => Schange(item)"
              />
              <!-- <u-switch
                size="44rpx"
                :value="item.status == 1"
                @change="(e) => Schange(item)"
              ></u-switch> -->
            </view>
          </view>
          <view class="item-bottom" @click="onItemClick(item, index)">
            <text class="item-text">{{ item.message_total }}条对话</text>
            <text class="item-text">{{ item.created_at | date('yyyy-mm-dd hh:MM:ss') }}</text>
          </view>
        </view>
      </u-list-item>
    </u-list>
  </view>
</template>
<script>
export default {
  options: {
    styleIsolation: 'shared',
  },
  name: '',
  data() {
    return {
      shareList: [],
      page: { page: 1, limit: 10 },
      total: 0,
      value: '',
    }
  },
  async created() {
    const res = await this.$store.dispatch('IchatShareList', this.page)
    this.shareList = res.list
    this.total = res.total
    if (res.total < 1) {
      uni.showToast({
        title: '您还没有聊天分享',
        icon: 'none',
        duration: 5000,
      })
    }
    console.log(' this.shareList', this.shareList)
  },
  methods: {
    async scrolltolower() {
      uni.showLoading({
        title: '加载中...',
        mask: true,
      })
      if (this.total == this.shareList.length && this.total > 1) {
        uni.hideLoading()
        return uni.showToast({
          title: '加载完成',
          icon: 'none',
        })
      }
      this.page.page = this.page.page + 1
      const res = await this.$store.dispatch('IchatShareList', this.page)
      this.shareList = [...this.shareList, ...res.list]
      console.log('触底')
      uni.hideLoading()
    },
    onItemClick(item) {
      console.log(item)
      // return
      uni.navigateTo({
        url: '/pages/share/index?uuid=' + item.uuid,
      })
    },
    async Schange(item) {
      uni.showLoading({
        title: '加载中...',
      })
      await this.$store.dispatch('IchatShareUpdate', {
        id: item.id,
        status: item.status == 1 ? 2 : 1,
      })

      this.page.page = 1
      const res = await this.$store.dispatch('IchatShareList', this.page)
      this.shareList = res.list
      this.total = res.total
      uni.hideLoading()
      uni.showToast({
        title: '修改成功',
        icon: 'none',
      })
      console.log(item)
    },
  },
}
</script>
<style scoped lang="scss">
.invite {
  background-color: rgba(246, 247, 249, 1);
  padding: 0 32rpx 32rpx 32rpx;
}
.item-title-box {
  display: flex;
  justify-content: space-between;

  .item-title {
    font-size: 32rpx;
    font-weight: 700;
    // flex: 1;
    color: rgba(51, 51, 51, 1);
    margin-right: 20rpx;
  }
}
.dotPositon {
  position: absolute;
  top: 0;
  right: 0;
}
.moreDot {
  color: rgba(158, 158, 158, 1);
  border-radius: 0px 20rpx 0px 20rpx;
  background: rgba(235, 235, 235, 1);
  width: 44rpx;
  height: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item-bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 16rpx;

  .item-text {
    color: rgb(166, 166, 166);
    font-size: 24rpx;
  }
}
.item {
  padding: 21rpx 28rpx;
  background: #fff;
  margin-bottom: 20rpx;
  border-radius: 20rpx;
  position: relative;
}
.itemGruop {
  width: 128rpx;
  display: flex;
  // padding-left: 10rpx;
  box-sizing: border-box;
  justify-content: left;
  font-size: 28rpx;
  .icontxt {
    margin-left: 10rpx;
  }
}
::v-deep .uni-scroll-view-content {
  margin-top: 32rpx;
}
::v-deep .u-list {
  height: 94vh !important;
}
</style>
